﻿@model Weibo.Web.Models.BaseInfoModel
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@{
    ViewBag.Title = "修改头像 XX微博-随时随地分享身边的新鲜事儿";
}
@section  cssInsert{
    <link href="/Content/CSS/setup.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .up .head, .up .con, up.bottom
        {
            width: 100%;
        }
        .head .upload
        {
            margin: 10px 10px 10px 0px;
        }
        .upload input
        {
            filter: alpha(opacity=0);
            opacity: 0;
        }
        .con .left
        {
            width: 50%;
            float: left;
            border-right: 1px solid #E5E5E5;
            padding: 10px 10px 10px 0px;
        }
        .left .preview
        {
            width: 300px;
            height: 300px;
            background-color: #E5E5E5;
            position: relative;
            overflow: hidden;
        }
        .con .right1
        {
            width: 300px;
            float: left;
            padding: 10px;
        }
        .right1 .head
        {
            color: #CD6500;
            width: 100%;
            float: left;
        }
        .right1 .big
        {
            float: left;
            margin: 10px;
            width: 180px;
            _display: inline;
            text-align: center;
        }
        .big .preview
        {
            width: 180px;
            height: 180px;
            background-color: #E5E5E5;
            position: relative;
            overflow: hidden;
        }
        .right1 .mid
        {
            float: left;
            margin: 10px;
            width: 60px;
            _display: inline;
            text-align: center;
        }
        .mid .preview
        {
            width: 50px;
            height: 50px;
            background-color: #E5E5E5;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        .right1 .small
        {
            float: left;
            margin: 10px;
            width: 60px;
            _display: inline;
            text-align: center;
        }
        .small .preview
        {
            width: 30px;
            height: 30px;
            background-color: #E5E5E5;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
    </style>
}
@section  jsInsert{
    <script src="/Scripts/Setup.js" type="text/javascript"></script>
    <link href="/Scripts/jcorp/jquery.Jcrop.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jcorp/jquery.Jcrop.min.js" type="text/javascript"></script>
    <script src="../../Scripts/js/ChangeAvatar.js" type="text/javascript"></script>
}
<div class="MIB_blogbody">
    <!--找朋友-->
    <div class="MIB_column">
        <div class="MIB_main_cont">
            <div class="MIB_setup">
                <!--页签-->
                <div class="PY_tag">
                    <ul>
                        <li>
                            <div class="PY_tagn">
                                <span><a href="/Setup/BaseInfo">个人资料</a></span></div>
                        </li>
                        <li>
                            <div class="PY_tago">
                                <span class="bold">修改头像</span></div>
                        </li>
                        <li>
                            <div class="PY_tagn">
                                <span><a href="/Setup/privacy">隐私设置</a></span></div>
                        </li>
                        <li>
                            <div class="PY_tagn">
                                <span><a href="/Setup/Notice">个性设置</a></span></div>
                        </li>
                    </ul>
                </div>
                <!--/页签-->
                <!--个人资料-->
                <div class="setup_main">
                    <div id="div_flashupload" class="up">
                        <div class="head">
                            <div class="upload">
                                <a href="javascript:void(0)" style="overflow: hidden; position: relative;" class="btn_green">
                                    <em>从电脑选择图片</em><form target="ifrPicUpload" id="frmPicUpload" enctype="multipart/form-data"
                                    method="POST" action="/Setup/UploadAvatar/">
                                    <input type="file" name="pic1" style="outline: medium none; width: 75px; height: 25px;
                                        position: absolute; z-index: 100000;" hidefoucs="true" />
                                    </form>
                                </a>
                            </div>
                            <div class="gray9">
                                仅支持JPG、PNG、Gif图片文件，且文件小于5M</div>
                        </div>
                        <div class="con">
                            <div class="left">
                                <div class="preview">
                                    <img id="CutBox" src="/Content/Image/transparent.gif" />
                                    <img id="loadCut" src="/Content/Image/loading.gif" alt="" title="" height="16" width="16"
                                        style="display: none; left: 142px; top: 142px; position: absolute;">
                                </div>
                            </div>
                            <div class="right1">
                                <div class="head">
                                    你上传的头像会自动生成三种尺寸，请注意中小尺寸的头像是否清晰</div>
                                <div class="big">
                                    <div class="preview">
                                        <img id="preview_180" src="/Content/Image/transparent.gif" />
                                        <img id="load_180" src="/Content/Image/loading.gif" alt="" title="" height="16" width="16"
                                            style="display: none; left: 82px; top: 82px; position: absolute;">
                                    </div>
                                    <div class="gray9">
                                        大尺寸头像，180*180</div>
                                </div>
                                <div class="mid">
                                    <div class="preview">
                                        <img id="preview_50" src="/Content/Image/transparent.gif" />
                                        <img id="load_50" src="/Content/Image/loading.gif" alt="" title="" height="16" width="16"
                                            style="display: none; left: 17px; top: 17px; position: absolute;">
                                    </div>
                                    <div class="gray9">
                                        中尺寸头像，50*50</div>
                                </div>
                                <div class="small">
                                    <div class="preview">
                                        <img id="preview_30" src="/Content/Image/transparent.gif" />
                                        <img id="load_30" src="/Content/Image/loading.gif" alt="" title="" height="16" width="16"
                                            style="display: none; left: 7px; top: 7px; position: absolute;">
                                    </div>
                                    <div class="gray9">
                                        小尺寸头像，30*30</div>
                                </div>
                            </div>
                            <div class="clearit">
                            </div>
                        </div>
                        <div class="bottom">
                            <a class="newabtngrn" id="submitAvatar" href="javascript:void(0);"><em>保存</em></a>
                        </div>
                    </div>
                </div>
                <!--/个人资料-->
            </div>
        </div>
    </div>
    <!--/找朋友-->
</div>
